<!--
 * @页面名称:vxe表格1
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="main-box">
    <splitpanes :dbl-click-splitter="false" style="display: flex">
      <pane size="15">
        <div class="card tree">
          <!-- <el-button style="width: calc(100% - 10px)" @click="toggle">是否显示勾选</el-button> -->
          <el-input v-model="searchNode" placeholder="请筛选节点" @change="onSearch"></el-input>
          <ztree
            :setting="treeSetting.setting"
            :nodes="treeSetting.treeData"
            @onClick="onClick"
            @onCreated="handleCreated"
            @onCheck="onCheck"
          ></ztree>
        </div>
      </pane>
      <pane size="85">
        <div class="table-box">
          <div class="card table-main" style="position: relative">
            <div class="table-header">
              <div class="header-button-lf" style="margin-right: 20px">
                <slot>
                  <el-tooltip class="box-item" effect="dark" content="新增" placement="top">
                    <el-button :icon="FolderAdd" :disabled="btnStatus[0]" circle @click="openDrawer('新增')" />
                  </el-tooltip>
                  <el-tooltip class="box-item" effect="dark" content="修改" placement="top">
                    <el-button :icon="Edit" :disabled="btnStatus[1]" circle @click="openDrawer('修改')" />
                  </el-tooltip>
                  <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
                    <el-button :icon="Delete" :disabled="btnStatus[2]" circle @click="deleteAccount" />
                  </el-tooltip>
                  <el-tooltip class="box-item" effect="dark" content="前端导出" placement="top">
                    <el-button :icon="Download" :disabled="btnStatus[3]" circle @click="exportExcel" />
                  </el-tooltip>
                </slot>
              </div>
              <el-row>
                <el-col :span="5" style="margin-right: 20px">
                  <el-input v-model="searchVal1" placeholder="本地搜索" @change="onSearchChange" />
                </el-col>
                <el-col :span="5">
                  <el-input v-model="searchVal2" placeholder="远程搜索" @change="onSearchChange2" />
                </el-col>
              </el-row>
            </div>
            <div style="height: calc(100% - 42px)">
              <stable
                :columns="tableSetting.columns"
                :data="tableSetting.data"
                :tablePage="tableSetting.tablePage"
                @pageChange="pageChange"
                @rowClick="rowClick"
                @selectionChange="selectionChange"
              ></stable>
            </div>
          </div>
        </div>
      </pane>
    </splitpanes>
    <el-dialog v-model="dialogSetting.visible" :title="dialogSetting.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="顺序号:" prop="dept_Order">
          <el-input v-model="formData.dept_Order"></el-input>
        </el-form-item>
        <el-form-item label="部门名称1:" prop="dept_Name">
          <el-input v-model="formData.dept_Name"></el-input>
        </el-form-item>
        <el-form-item label="部门名称2:" prop="dept_Name2">
          <el-input v-model="formData.dept_Name2"></el-input>
        </el-form-item>
        <el-form-item label="部门名称3:" prop="dept_Name3">
          <el-input v-model="formData.dept_Name3"></el-input>
        </el-form-item>
        <el-form-item label="部门代号1:" prop="dept_Code">
          <el-input v-model="formData.dept_Code"></el-input>
        </el-form-item>
        <el-form-item label="部门代号2:" prop="dept_Code2">
          <el-input v-model="formData.dept_Code2"></el-input>
        </el-form-item>
        <el-form-item label="部门代号3:" prop="dept_Code3">
          <el-input v-model="formData.dept_Code3"></el-input>
        </el-form-item>
        <el-form-item label="父级:" prop="dept_Father">
          <el-tree-select
            style="width: 100%"
            check-strictly
            v-model="formData.dept_Father"
            node-key="Dept_ID"
            :props="{ label: 'Dept_Name', children: 'children' }"
            :data="parentData"
            :render-after-expand="false"
          />
        </el-form-item>
        <el-form-item label="是否启用:" prop="dept_Enable">
          <el-checkbox v-model="formData.dept_Enable"></el-checkbox>
        </el-form-item>
        <el-form-item label="备注:" prop="dept_Remark">
          <el-input v-model="formData.dept_Remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref, onMounted, nextTick } from "vue";
import { FolderAdd, Edit, Delete, Upload, Download } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
// 节点筛选保存数据
const searchNode = ref("");
// 本地搜索
const searchVal1 = ref("");
const searchVal2 = ref("");

// 树节点勾选状态
const toggleStatus = ref(false);
// tree配置
const treeSetting = reactive({
  setting: {
    // ztree配置
    check: {
      enable: false
    },
    data: {
      simpleData: {
        enable: true,
        idKey: "Fonds_ID",
        pIdKey: "Fonds_Father"
      },
      key: {
        name: "Fonds_Name"
      }
    },
    view: {
      showIcon: false
    }
  },
  treeData: [],
  treeNode: {} as any,
  ztreeObj: {} as any
});
// 按钮配置
const btnStatus = ref([true, true, true, true]);

// table配置
const tableSetting = reactive({
  columns: [
    { type: "checkbox", width: 50 },
    { field: "Dept_Order", title: "顺序号", sortable: true },
    { field: "Dept_Name", title: "部门名称", sortable: true },
    { field: "Dept_Name2", title: "部门名称2", sortable: true },
    { field: "Dept_Name3", title: "部门名称3", sortable: true },
    { field: "Dept_Code", title: "部门代号", sortable: true },
    { field: "Dept_Code2", title: "部门代号2", sortable: true },
    { field: "Dept_Code3", title: "部门代号3", sortable: true },
    {
      field: "Dept_Enable",
      title: "启用",
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [
            <div>
              <el-checkbox disabled v-model={row.Dept_Enable} />
            </div>
          ];
        }
      }
    },
    { field: "Dept_Remark", title: "备注", sortable: true }
  ],
  data: [] as any,
  sourthTableData: [] as any[],
  tablePage: {
    showPage: true,
    pageIndex: 1,
    pageSize: 20,
    total: 0
  },
  selectionData: [],
  ztreeObj: {}
});
// 单击保存数据
const clickObj = ref();
// 弹出框配置
const dialogSetting = reactive({
  visible: false,
  title: ""
});
// 表单配置
const formData = reactive({
  dept_Code: "",
  dept_Code2: "",
  dept_Code3: "",
  dept_Name: "",
  dept_Name2: "",
  dept_Name3: "",
  dept_Enable: true,
  dept_Father: null as any,
  dept_Order: 1,
  dept_Remark: ""
});
// 弹出框表单父级数据
const parentData = ref<any[]>([]);
// 表单规则
const rules = reactive<FormRules>({});
// 表单实例
const formRef = ref<FormInstance>();
// 切换树节点勾选状态
const toggle = () => {
  toggleStatus.value = !toggleStatus.value;
  // treeSetting.setting.check.enable = toggleStatus.value;
  treeSetting.ztreeObj.setting.check.enable = toggleStatus.value;
  console.log(treeSetting.ztreeObj.setting.check.enable);
};
// 获取全宗树
const getFondsData = () => {
  proxy.$vueAxios.get("MasterBaseFonds/GetFondsTree").then((res: any) => {
    treeSetting.treeData = res.List;
  });
};
// 获取初始化树对象
const handleCreated = (ztreeObj: any) => {
  treeSetting.ztreeObj = ztreeObj;
};
// 点击树节点
const onClick = (treeNode: any) => {
  btnStatus.value[0] = false;
  treeSetting.treeNode = treeNode;
  getTableData();
};
// 勾选树节点
const onCheck = () => {
  console.log("[ treeSetting.ztreeObj.getCheckedNodes(true) ] >", treeSetting.ztreeObj.getCheckedNodes(true));
};
// 获取表格数据
const getTableData = () => {
  proxy.$vueAxios
    .post("Master_Base_Dept/GetConditional", {
      pageIndex: tableSetting.tablePage.pageIndex,
      pageSize: tableSetting.tablePage.pageSize,
      order: "Dept_Order asc",
      dtoList: [{ fieldName: "Fonds_ID", fieldValue: treeSetting.treeNode.Fonds_ID, conditionalType: 0 }]
    })
    .then((res: any) => {
      tableSetting.data = res.List;
      tableSetting.sourthTableData = res.List;
      tableSetting.tablePage.total = res.Count;
    });
};
// 切换分页
const pageChange = ({ pageIndex, pageSize }: { pageIndex: number; pageSize: number }) => {
  tableSetting.tablePage.pageIndex = pageIndex;
  tableSetting.tablePage.pageSize = pageSize;
  getTableData();
};
// 表格单击事件
const rowClick = ({ row }: any) => {
  clickObj.value = row;
  btnStatus.value[1] = false;
  btnStatus.value[2] = false;
};
// 多选
const selectionChange = (val: any) => {
  tableSetting.selectionData = val;
  if (tableSetting.selectionData.length > 0) {
    btnStatus.value[3] = false;
  } else {
    btnStatus.value[3] = true;
  }
};
// 新增/修改按钮事件
const openDrawer = (name: string) => {
  switch (name) {
    case "新增":
      dialogSetting.visible = true;
      dialogSetting.title = "新增";
      formRef.value?.resetFields();
      break;
    case "修改":
      dialogSetting.visible = true;
      dialogSetting.title = "修改";
      break;
  }
};
// 删除事件
const deleteAccount = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_Dept/Delete", [clickObj.value.Dept_ID]).then((res: any) => {
        if (res.Mark) {
          getTableData();
          proxy.$message.success("删除成功");
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      proxy.$message("取消删除");
    });
};
// 导出事件
const exportExcel = () => {
  if (tableSetting.selectionData.length === 0) {
    proxy.$notify.warning({
      title: "提示",
      message: "未选中任何数据!"
    });
    return false;
  }
  const header = tableSetting.columns.filter(v => v.title).map(v => v.title);
  const filterVal = tableSetting.columns.filter(v => v.title).map(v => v.field);
  const data = tableSetting.selectionData.map((v: any) => filterVal.map((j: any) => v[j]));
  import("@/vendor/Export2Excel").then(excel => {
    excel.export_json_to_excel({
      header: header, //表头 必填
      data, //具体数据 必填
      filename: "基础表格", //非必填
      autoWidth: true, //非必填
      bookType: "xlsx" //非必填
    });
  });
};
// 新增/修改确认事件
const handle = () => {};
// 搜索事件
const onSearchChange = () => {
  const filterData = tableSetting.sourthTableData.filter(
    data =>
      data.Dept_Name.toLowerCase().includes(searchVal1.value.toLowerCase()) ||
      data.Dept_Code.toLowerCase().includes(searchVal1.value.toLowerCase())
  );
  tableSetting.data = filterData;
};
// 搜索事件2
const onSearchChange2 = () => {
  const filterData = tableSetting.sourthTableData.filter(
    data =>
      data.Dept_Name.toLowerCase().includes(searchVal1.value.toLowerCase()) ||
      data.Dept_Code.toLowerCase().includes(searchVal1.value.toLowerCase())
  );
  tableSetting.data = filterData;
};
// 节点搜索事件
const onSearch = () => {
  if (searchNode.value) {
    const nodes = treeSetting.ztreeObj.getNodesByParamFuzzy("Fonds_Name", searchNode.value, null);
    treeSetting.treeData = nodes;
  } else {
    getFondsData();
  }
};
onMounted(() => {
  getFondsData();
});
</script>

<style scoped lang="scss">
.main-box {
  .tree {
    height: 100%;
    // width: 260px;
    padding: 10px;
    // margin-right: 10px;
    overflow: auto !important;
    :deep(#treeDemo) {
      display: flex !important;
    }
    .z-tree {
      height: calc(100% - 32px);
    }
  }
  .table-box {
    width: 100%;
    .table-search {
      padding: 5px;
    }
  }
}
</style>
